<template>
  <div class="ExchangeGoods">
    <div class="demo-nav">
      <div class="demo-nav__title">换货</div>
      <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
        <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
      </svg>
    </div>
    <div class="ExchangeGoods-demo">
      <van-row>
        <van-col span="7"><van-image width="5rem" height="5rem" fit="cover" :src="list.picUrl"/></van-col>
        <van-col span="15" style="text-align: left">
          <p>{{list.productName}}</p>
          <P style="color: #cccccc;font-size: 0.6rem;padding-top: 0.5rem">{{list.labelName}},{{list.labelUnit}}</P>
        </van-col>
      </van-row>
      <van-cell-group>
        <van-field v-model="orderChange.orderChangeReason" label="换货原因" placeholder="必填"/>
      </van-cell-group>
      <van-cell title="上传凭证" align="left"/>
      <div align="left" style="padding: 0.8rem">
        <van-uploader
          v-model="fileList"
          :max-count="4"
          :after-read="onRead"
          accept="image/*"
          :multiple="true"
        ></van-uploader>
      </div>
    </div>
    <van-button round type="danger" @click="exchange()">提交换货</van-button>
  </div>
</template>

<script>
  import { addOrderChange,uploadImagesChange } from "@/api/commodity/order_retreat";
  import { Notify } from 'vant';
  import { Toast } from 'vant';
  export default {
    name: "ExchangeGoods",
    data(){
      return{
        //订单列表申请换货的对象
        list:{},
        //换货原因的理由
        orderChange:{
          orderId:'',
          supplierId:'',
          orderChangeReason:'',
          orderChangePicture:'',
          fileList:[],
          urlList:[],
        },
        //上传的图片
        fileList:[],
        urlList:[],


      }
    },
    created() {
      this.list = JSON.parse(sessionStorage.getItem('list'));
      console.log(this.list);
    },
    methods:{
      toBack(){
        this.$router.go(-1);//返回上一层
      },
      //上传多图片
      onRead (e) {
        //注意，我们这里没有使用form表单提交文件，所以需要用new FormData来进行提交
        let fd = new FormData()
        if (e instanceof Array && e.length) { // 判断是否是多图上传 多图则循环添加进去
          e.forEach(item => {
            fd.append("files", item.file)//第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
          })
        } else {
          fd.append("files", e.file)
        }
        uploadImagesChange(fd).then((res)=>{
          if(res.data.code==200){
            this.urlList.push(res.data);
          }else {

          }
          console.log(res);
        })
      },
      //提交换货信息
      exchange(){
        this.orderChange.orderId = this.list.orderId;
        this.orderChange.supplierId = this.list.supplierId;
        this.fileList.forEach(it=>{
          this.orderChange.fileList.push(it.file.name);
        })
        this.orderChange.urlList = this.urlList;
        if(this.orderChange.orderChangeReason=='' ){
          Notify({ type: 'danger', message: '请填写换货原因' });
        }else {
          addOrderChange(this.orderChange).then((res)=>{
            if(res.data.code==200){
              this.$router.push({ path:'/AllOrder'});
              Toast.success("申请成功");
            }else {
              this.$router.push({ path:'/AllOrder'});
              Toast.fail("申请失败");
            }
            console.log(res,"789");
          })
        }
      },

    }
  }
</script>

<style scoped>
  .demo-nav{
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 56px;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
</style>
